import React, {useState, useEffect} from 'react'
import { Toast } from 'react-vant'
import NavBar from '@components/NavBar'
import request from "@services/request";
import './styles/index.less'

const Address = (props) => {
  useEffect(() => {
    console.log('props.state', props.state)
  }, [])

  const { publicKey, signMessage } = JSON.parse(localStorage.getItem('biwSign') || '{}')

  const setDefaultAddress = async (item, index) => {
    const params = {...item}
    if (params.status === '0') {
      params.status = 1
    } else {
      params.status = 0
    }

    params.id = Number(params.id)

    params.publicKey = publicKey
    params.sign = signMessage

    try {
      if (params.status === 0 && props.state.listAddress[index].status === '1') return Toast.info('至少存在一个默认地址')
      const res = await request.post("app_server/update_address", params);
      console.log(666, res.status)
      if (res.status === 'ok') {
        const res = await request.get("app_server/user_info");
        props.setState(res);
      }
    } catch (error) {
      console.log(error)
      Toast.info('操作失败')
    }
  }

  const deleteAddress = async (params, index) => {
    params.publicKey = publicKey
    params.sign = signMessage

    try {
      params.id = Number(params.id)
      params.status = 2
      const res = await request.post("app_server/update_address", params);
      if (res.status === 'ok') {
        const res = await request.get("app_server/user_info");
        props.setState(res);
      }
    } catch (error) {
      console.log(error)
      Toast.info('操作失败')
    }
  }

  return (
    <>
      <div className="background"></div>
      <div className="address">
        <NavBar title="管理地址" />
        <div className="main">
          <div className="address-list">
            {
              props.state.listAddress.map((item, index) => (
                <div className="address-list-item">
                  <div className="item-content">
                    <span>收货人：{item.name}</span>
                    <span>{item.phone}</span>
                  </div>
                  <div className="item-content">
                    <span style={{color: '#666'}}>{item.d}</span>
                  </div>
                  <div className="item-content">
                    <span>
                      <i className={String(item.status) === '1' ? `default-address-btn active` : `default-address-btn`} onClick={(e) => {
                        e.preventDefault()
                        setDefaultAddress(item, index)
                      }}>默认地址</i>
                    </span>
                    <span>
                      <i className="edit-btn" onClick={() => props.navigate(`/address/manage?id=${item.id}`)}>编辑</i>
                      <i className="delete-btn" onClick={() => deleteAddress(item, index)}>删除</i>
                    </span>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
        <div className="add-address-btn" onClick={() => props.navigate('/address/manage')}>添加新地址</div>
      </div>
    </>
  )
}

export default Address;